<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>pickup package</title>
  <link type="text/css" rel="stylesheet" href="./css/base.css">
  <link type="text/css" rel="stylesheet" href="./css/pickUp.css">
</head>
<body>
  <div class="full-container">
    <!-- <div class="header clearfix">
      <div class="header-left float-l clearfix">
        <a class="close float-l">
          <img src="./img/back.png" alt="">
        </a>
        <span class="float-l">取件</span>
      </div>
      <div class="header-right float-r">
        <a class="user">
          <img src="" alt="">
        </a>
      </div>
    </div> -->
    <div class="content">
      <div class="content-wrapper">

        <div class="notification">
          <div class="notification-wrapper">
            <p class="noti-1">抱歉，暂无您的包裹</p>
            <p class="noti-2">请联系工作人员，走人工通道</p>
          </div>
          <a class="confirm">确定</a>
        </div>

        <div class="error-scan">
          <p class="error-message">请扫描闸机二维码</p>
          <a class="return-scan">重新扫描</a>
        </div>

        <!-- <div class="express-info clearfix">
          <div class="express-left float-l">
            <div class="checkbox-wrapper">
              <input id="checkbox_001" type="checkbox" class="checkbox">
            </div>
          </div>

          <div id="express_001" class="express-right float-r">
            <div class="express-right-wrapper">
              <div class="line-top clearfix">
                <div class="line-left float-l">
                  <span class="waybill-number">3915060155943</span>
                </div>
              </div>
              <div class="line-bottom clearfix">
                <div class="line-left float-l">
                  <span class="waybill-company">顺丰</span>
                </div>
                <div class="line-right float-r">
                  <span class="pickup-code">取件码：123456</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="express-info clearfix">
            <div class="express-left float-l">
              <div class="checkbox-wrapper">
                <input id="checkbox_002" type="checkbox" class="checkbox">
              </div>
            </div>
  
            <div id="express_002" class="express-right float-r">
              <div class="express-right-wrapper">
                <div class="line-top clearfix">
                  <div class="line-left float-l">
                    <span class="waybill-number">3915060155943</span>
                  </div>
                </div>
                <div class="line-bottom clearfix">
                  <div class="line-left float-l">
                    <span class="waybill-company">申通</span>
                  </div>
                  <div class="line-right float-r">
                    <span class="pickup-code">取件码：123456</span>
                  </div>
                </div>
              </div>
            </div>
          </div> -->

      </div>
    </div>

    <div class="footer clearfix">
      <div class="footer-left float-l clearfix">
        <div class="check-all-wrapper float-l">
          <input type="checkbox" id="check_all" class="checkbox">
        </div>
        <span id="check_all_text" class="float-l">全选 <ins id="check_count"></ins></span>
      </div>
      <div class="footer-right float-r">
        <a class="confirm-pickup">确认取件</a>
      </div>
    </div>
  </div>
</body>
</html>
<script>
  var contentWrapper = document.getElementsByClassName("content-wrapper")[0],
      check_all = document.getElementById("check_all"),
      check_count = document.getElementById("check_count"),
      check_all_text = document.getElementById("check_all_text"),
      confirm_pickup = document.getElementsByClassName("confirm-pickup")[0],
      confirm = document.getElementsByClassName("confirm")[0];

  // 模拟获取的运单列表数据
  const data = [{
  "id": 200,
  "storeId": "88888",
  "expcode": "883535384144392961",
  "expId": "202",
  "userPhone": "15221391109",
  "statusTime": "2018-03-27 18:52:27.0",
  "status": "国内件",
  "shelfCode": "20002"
}, {
  "id": 203,
  "storeId": "88888",
  "expcode": "883564245992191065",
  "expId": "202",
  "userPhone": "15221391109",
  "statusTime": "2018-03-27 18:52:29.0",
  "status": "国内件",
  "shelfCode": "20005"
}, {
  "id": 244,
  "storeId": "88888",
  "expcode": "88888T201803281602X50016",
  "expId": "202",
  "userPhone": "15221391109",
  "statusTime": "2018-03-28 16:17:32.0",
  "status": "国内件",
  "shelfCode": "50016"
}, 
// {
//   "id": 245,
//   "storeId": "88888",
//   "expcode": "88888T201803281602X50017",
//   "expId": "202",
//   "userPhone": "15221391109",
//   "statusTime": "2018-03-28 16:17:31.0",
//   "status": "国内件",
//   "shelfCode": "50017"
// }, {
//   "id": 246,
//   "storeId": "88888",
//   "expcode": "88888T201803281602X50019",
//   "expId": "202",
//   "userPhone": "15221391109",
//   "statusTime": "2018-03-28 16:17:30.0",
//   "status": "国内件",
//   "shelfCode": "50019"
// }, {
//   "id": 247,
//   "storeId": "88888",
//   "expcode": "88888T201803281602X50018",
//   "expId": "202",
//   "userPhone": "15221391109",
//   "statusTime": "2018-03-28 16:17:30.0",
//   "status": "国内件",
//   "shelfCode": "50018"
// }, {
//   "id": 248,
//   "storeId": "88888",
//   "expcode": "88888T201803281602X50020",
//   "expId": "202",
//   "userPhone": "15221391109",
//   "statusTime": "2018-03-28 16:17:29.0",
//   "status": "国内件",
//   "shelfCode": "50020"
// }, {
//   "id": 267,
//   "storeId": "88888",
//   "expcode": "88888T201803302156X6001",
//   "expId": "202",
//   "userPhone": "15221391109",
//   "statusTime": "2018-03-30 21:57:00.0",
//   "status": "已处理",
//   "shelfCode": "6001"
// }, {
//   "id": 269,
//   "storeId": "88888",
//   "expcode": "886618919782230050",
//   "expId": "202",
//   "userPhone": "15221391109",
//   "statusTime": "2018-03-30 22:08:00.0",
//   "status": "国内件",
//   "shelfCode": "6005"
// }, {
//   "id": 272,
//   "storeId": "88888",
//   "expcode": "886631218323825703",
//   "expId": "202",
//   "userPhone": "15221391109",
//   "statusTime": "2018-03-30 22:08:05.0",
//   "status": "国内件",
//   "shelfCode": "6003"
// }, {
//   "id": 273,
//   "storeId": "88888",
//   "expcode": "88888T201803302157X6004",
//   "expId": "202",
//   "userPhone": "15221391109",
//   "statusTime": "2018-03-30 21:57:21.0",
//   "status": "已处理",
//   "shelfCode": "6004"
// }, {
//   "id": 304,
//   "storeId": "88888",
//   "expcode": "810885600168",
//   "expId": "202",
//   "userPhone": "15221391109",
//   "statusTime": "2018-03-30 22:05:52.0",
//   "status": "国内件",
//   "shelfCode": "6040"
// }, {
//   "id": 309,
//   "storeId": "88888",
//   "expcode": "883498808625320753",
//   "expId": "202",
//   "userPhone": "15221391109",
//   "statusTime": "2018-03-30 22:05:29.0",
//   "status": "国内件",
//   "shelfCode": "6046"
// }, {
//   "id": 310,
//   "storeId": "88888",
//   "expcode": "883482160568303173",
//   "expId": "202",
//   "userPhone": "15221391109",
//   "statusTime": "2018-03-30 22:05:24.0",
//   "status": "国内件",
//   "shelfCode": "6047"
// }
];

  // var xhr = new XMLHttpRequest();
  // xhr.onreadystatechange = function(){
  //   if (xhr.readyState == 4) {
  //     var res = JSON.parse(xhr.responseText)
  //     // 查看包裹数据，没有显示提示
      
  //   }
  // }
  // xhr.open('GET','/express/getExpress');
  // xhr.send()

  var checkbox_list = [];
  var express_code = [];
  data.forEach(function(ele,index){
    var infoWrapper = document.createElement("div");
    contentWrapper.appendChild(infoWrapper);
    infoWrapper.outerHTML = `<div class="express-info clearfix">
          <div class="express-left float-l">
            <div class="checkbox-wrapper">
              <input id="checkbox_${index}" onclick="check()" type="checkbox" class="checkbox check-item">
            </div>
          </div>

          <div id="express_${index}" class="express-right float-r">
            <div class="express-right-wrapper">
              <div class="line-top clearfix">
                <div class="line-left float-l">
                  <span class="waybill-number">${ele.expcode}</span>
                </div>
              </div>
              <div class="line-bottom clearfix">
                <div class="line-left float-l">
                  <span class="waybill-company">${ele.expId}</span>
                </div>
                <div class="line-right float-r">
                  <span class="pickup-code">取件码：${ele.storeId}</span>
                </div>
              </div>
            </div>
          </div>
        </div>`
    var checkbox_$ = document.getElementById("checkbox_"+index),
        express_$ = document.getElementById("express_"+index),
        express_$_code = express_$.getElementsByClassName("waybill-number")[0].innerText;
    
        // console.log(checkbox_$)
        // console.log(express_$)
        // console.log(express_$_code)

        // 存入对象，便于提取
        express_code[index] = express_$_code
    
    checkbox_list.push(checkbox_$)
  })
  // console.log(checkbox_list)
  // console.log(express_code)

  // HTMLCollection 是类数组不可遍历，length属性可以使用
  // var checkboxs_list = document.getElementsByClassName("checkbox check-item")
  // console.log(checkboxs_list)
  
  var reqExpStr,reqExpArr;
  function check(){
    reqExpStr = '';
    reqExpArr = [];

    // 利用拾取数据的逻辑，将check_list替换为reqExpArr
    // var check_list = checkbox_list.filter(function(ele,ind){
    //   return ele.checked == true
    // })
    // console.log(check_list.length)

    // 拾取数据
    checkbox_list.forEach(function(ele,ind){
      if (ele.checked == true) {
        // console.log(ind)
        // 提取对应ind的express_code键值
        reqExpArr.push(express_code[ind])
      }
    })
    console.log(reqExpArr)
    reqExpStr = reqExpArr.join(",")
    console.log(reqExpStr)

    // 单选联动
    if (reqExpArr.length == checkbox_list.length) {
      check_all.checked = true
    } else {
      check_all.checked = false
    }

    // 显示合计
    check_count.innerText = reqExpArr.length

    // 判断是否选取包裹
    if (reqExpArr.length) {
      // 控制确认按钮状态
      confirm_pickup.classList.remove("disable")
      check_all_text.classList.remove("disable")
      // 添加确认事件
      confirm_pickup.addEventListener("click", confirmPick)
    } else {
      confirm_pickup.classList.add("disable")
      check_all_text.classList.add("disable")
      // 移除确认事件
      confirm_pickup.removeEventListener("click", confirmPick)
    }
  }

  check_all.onclick = checkAll;
  function checkAll(){
    // 全选联动
    if (check_all.checked) {
      checkbox_list.forEach(function(ele,index){
        ele.checked = true
      })
    } else {
      checkbox_list.forEach(function(ele,index){
        ele.checked = false
      })
    }
    // 触发check，拾取数据
    check()
  }
  
  // 初始设置为全选
  check_all.checked = true;
  checkAll()
  
  function confirmPick(){
    console.log("confirm pickup")
  }

</script>